<!DOCTYPE html>
<html lang="en">
<head th:include="fragments/head::header"/>
<body class="no-skin">
<div th:include="fragments/navbar::navbar"></div>

<div class="main-container ace-save-state" id="main-container">
    <div th:include="fragments/left::left" id="sidebar" class="sidebar  responsive ace-save-state"></div>

    <div class="main-content">
        <div class="main-content-inner">
            <input type="hidden" name="occupationPercent" th:each="iterStat,item: ${occupationPercent}" th:occupation="${item.current.key}" th:occupationPercent="${item.current.value}">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li><i class="icon-home home-icon"></i> <a href="/main">首页</a></li>
                </ul>
            </div>
            <div class="page-content">
                <div class="page-header">
                    <h1>
                        HearthStone
                        <small>
                            <i class="ace-icon fa fa-angle-double-right"></i>
                            预览
                        </small>
                    </h1>
                </div>
                <br/>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="alert alert-block alert-success">
                            <button type="button" class="close" data-dismiss="alert">
                                <i class="ace-icon fa fa-times"></i>
                            </button>
                            <i class="ace-icon fa fa-check green"></i>
                            Welcome to
                            <strong class="green">
                                HearthStone
                            </strong>
                        </div>
                        <div class="row">
                            <div class="space-6"></div>
                            <div class="vspace-12-sm"></div>
                            <div class="col-sm-5">
                                <div class="widget-box">
                                    <div class="widget-header widget-header-flat widget-header-small">
                                        <h5 class="widget-title">
                                            <i class="ace-icon fa fa-signal"></i>
                                            职业卡牌数占比
                                        </h5>
                                    </div>
                                    <div class="widget-body">
                                        <div class="widget-main">
                                            <div id="piechart-placeholder" style="width: 90%; min-height: 150px; padding: 0px; position: relative;">
                                                <canvas class="flot-base" width="564" height="150" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 564px; height: 150px;"></canvas>
                                                <canvas class="flot-overlay" width="564" height="150" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 564px; height: 150px;"></canvas>
                                                <div class="legend">
                                                    <div style="position: absolute; width: 107px; height: 110px; top: 15px; right: -30px; background-color: rgb(255, 255, 255); opacity: 0.85;"> </div>
                                                    <table style="position:absolute;top:15px;right:-30px;;font-size:smaller;color:#545454">
                                                        <tbody>
                                                            <tr>
                                                                <td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #68BC31;overflow:hidden"></div></div></td>
                                                                <td class="legendLabel">social networks</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #2091CF;overflow:hidden"></div></div></td>
                                                                <td class="legendLabel">search engines</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #AF4E96;overflow:hidden"></div></div></td>
                                                                <td class="legendLabel">ad campaigns</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #DA5430;overflow:hidden"></div></div></td>
                                                                <td class="legendLabel">direct traffic</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #FEE074;overflow:hidden"></div></div></td>
                                                                <td class="legendLabel">other</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            <div class="hr hr8 hr-double"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:include="fragments/bottom::bottom"></div>
</div>
<script type="text/javascript">
    jQuery(function ($) {
        var placeholder = $('#piechart-placeholder').css({'width':'90%' , 'min-height':'250px'});
        var data = [];
        $("input[name='occupationPercent']").each(function () {
            var occupation = $(this).attr("occupation");
            var occupationpercent = $(this).attr("occupationpercent");
            var color;
            switch (occupation) {
                case "中立": color = "#68BC31";break;
                case "德鲁伊": color = "#2091CF";break;
                case "猎人": color = "#AF4E96";break;
                case "法师": color = "#DA5430";break;
                case "圣骑士": color = "#FEE074";break;
                case "牧师": color = "#8C738C";break;
                case "潜行者": color = "#E6FF00";break;
                case "萨满": color = "#15D5EA";break;
                case "术士": color = "#EA15D5";break;
                case "战士": color = "#FB3504";break;
            }
            var item = {
                label:occupation,
                data:occupationpercent,
                color:color
            }
            data.push(item);
        });
        function drawPieChart(placeholder, data, position) {
            $.plot(placeholder, data, {
                series: {
                    pie: {
                        show: true,
                        tilt:0.8,
                        highlight: {
                            opacity: 0.25
                        },
                        stroke: {
                            color: '#fff',
                            width: 2
                        },
                        startAngle: 2
                    }
                },
                legend: {
                    show: true,
                    position: position || "ne",
                    labelBoxBorderColor: null,
                    margin:[-30,15]
                },
                grid: {
                    hoverable: true,
                    clickable: true
                }
            })
        }
        drawPieChart(placeholder, data);

        /**
         we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
         so that's not needed actually.
         */
        placeholder.data('chart', data);
        placeholder.data('draw', drawPieChart);


        //pie chart tooltip example
        var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');
        var previousPoint = null;

        placeholder.on('plothover', function (event, pos, item) {
            if(item) {
                if (previousPoint != item.seriesIndex) {
                    previousPoint = item.seriesIndex;
                    var tip = item.series['label'] + " : " + parseFloat(item.series['percent']).toFixed(2)+'%';
                    $tooltip.show().children(0).text(tip);
                }
                $tooltip.css({top:pos.pageY + 10, left:pos.pageX + 10});
            } else {
                $tooltip.hide();
                previousPoint = null;
            }

        });
    });
</script>
</body>
</html>
